<template>
  <el-dialog
    title="流域信息"
    v-model="state.dialogVisible"
    width="70%"
    :before-close="dialogBeforeClose"
  >
    <div class="map-container">
      <div class="basin-code"><span>流域编码：</span></div>
      <el-tabs type="border-card">
        <el-tab-pane label="计算成果信息"> <resultInfo /></el-tab-pane>
        <el-tab-pane label="基础属性信息"><baseInfo /></el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>
<script setup>
import { reactive, defineExpose } from 'vue'

import resultInfo from './cpns/compute-result.vue'
import baseInfo from './cpns/base-info.vue'
const state = reactive({
  dialogVisible: false
})
defineExpose({ openMapInfo })
function openMapInfo() {
  state.dialogVisible = true
}
const emit = defineEmits(['dialogClose'])
// 关闭弹框的回调
function dialogBeforeClose() {
  state.dialogVisible = false
  emit('dialogClose')
}
</script>
<style lang="less" scoped>
.map-container {
  height: 600px;
  .basin-code {
    margin-bottom: 10px;
  }
}
</style>
